
<template>
    <div class="box">
        <div class="fixed">
            <van-icon name="shopping-cart-o" size="30px" color="#666" />
        </div>
        <van-nav-bar title="商品详情" left-arrow @click-left="onClickLeft" class="vant" />
        <main>
            <div class="main">
                <div class="img">
                    <img src="https://img1.baidu.com/it/u=1593870210,214446382&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400"
                        alt="">
                    <p>
                        <span>1</span>
                        <span>/</span>
                        <span>1</span>
                    </p>
                </div>
                <div class="pic">
                    <div class="price">
                        <div class="share">
                            <van-icon name="share-o" color="#fff" />&nbsp;分享
                        </div>
                        <b>￥</b>
                        <b>2000.00</b>
                        <span>￥2000.00</span>
                        <p>销量0只</p>
                    </div>
                    <h3>银渐层弟弟2个月</h3>
                    <p>
                        <span>服务</span>&nbsp;
                        <van-icon name="certificate" color="#cd3b3b" />
                        <span>平台担保交易</span>
                    </p>
                </div>
                <div class="specs">
                    <span>
                        <van-cell is-link @click="showPopup1">
                            <span>选择</span>
                            <span class="sp2">规格</span>
                        </van-cell>
                        <van-popup v-model:show="show1" closeable close-icon="close" position="bottom"
                            :style="{ height: '50%' }" round>
                            <div class="one">
                                <img src="https://img1.baidu.com/it/u=1593870210,214446382&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400"
                                    alt="">
                                <span>￥500.00</span>
                                <span>库存4件</span>
                            </div>
                            <div class="two">
                                <span>规格</span>
                                <span>默认</span>
                            </div>
                            <div class="three">
                                <p>
                                    <span>数量</span>
                                </p>
                                <div>
                                    <button>-</button>
                                    <span>1</span>
                                    <button>+</button>
                                </div>
                            </div>
                            <div class="four">
                                <span>加入购物车</span>
                                <span>立即购买</span>
                            </div>
                        </van-popup>
                    </span>

                </div>
                <div class="discount">
                    <span>
                        <van-cell is-link @click="showPopup2">
                            <span class="dis">优惠</span>
                        </van-cell>
                        <van-popup v-model:show="show2" closeable close-icon="close" position="bottom"
                            :style="{ height: '70%' }" round>
                            <h4>优惠券</h4>
                            <p>- - 暂无优惠券 - -</p>
                        </van-popup>
                    </span>
                </div>
                <div class="shop">
                    <p>
                        <van-icon name="shop-o" color="#f70808" size="30px" class="van" />
                        <span>猫小银猫舍</span>
                        <span>进店逛逛
                            <van-icon name="arrow" />
                        </span>
                    </p>
                    <p>
                        <van-icon name="location-o" class="van" color="#a0a0a0" size="20px" />&nbsp;
                        <span>天津市-天津市-东丽区蓝庭轩</span>
                    </p>
                    <p>
                        <van-icon name="info-o" class="van" color="#a0a0a0" size="20px" />&nbsp;
                        <span>商品数量:&emsp;2</span>&emsp;
                        <span>已售:&emsp;0</span>
                    </p>
                </div>
                <div class="baby">
                    <div class="by">
                        <span>宝贝评价 &emsp;(0)</span>
                        <span>查看全部&nbsp;
                            <van-icon name="arrow" color="#a0a0a0" size="18px" />
                        </span>
                        <span>暂无评价</span>
                    </div>
                    <div class="topic">商品详情</div>
                    <div class="topc">
                        <div>
                            生日:7月13日,圆脸活泼银弟弟,赠送200克优质猫粮寻找天津爱心家长。13388070396同微
                        </div>
                    </div>
                </div>
            </div>

        </main>
        <footer>
            <div class="home">
                <van-icon name="wap-home-o" size="25px" />
                <span>首页</span>
            </div>
            <div class="like">
                <van-icon name="like-o" size="25px" />
                <span>收藏</span>
            </div>
            <div>
                <span class="span1">加入购物车</span>
                <span class="span2">立即购买</span>
            </div>
        </footer>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const show1 = ref(false);
const show2 = ref(false);
const showPopup1 = () => {
    show1.value = true;
};
const showPopup2 = () => {
    show2.value = true;
};
</script>
<style lang="scss" scoped>
.box {
    width: 100%;
    display: flex;
}

.main {
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

span,
b {
    display: inline-block;
}

.vant {
    --van-nav-bar-icon-color: #000;
}

.fixed {
    position: fixed;
    top: 70px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(243, 236, 236, 0.5);
    text-align: center;
    line-height: 58px;
    z-index: 33;
}

main {
    background: #f1f1f1;
    flex: 1;
    overflow: auto;

    &::-webkit-scrollbar {
        display: none;
    }
}

.img {
    width: 100%;
    position: relative;

    img {
        width: 100%;
        vertical-align: top;
    }

    p {
        position: absolute;
        bottom: 20px;
        right: 20px;
        background: rgb(102, 102, 102, .5);
        border-radius: 5px;

        span {
            text-align: center;
            font-size: 14px;
            color: #fff;
            height: 20px;
            line-height: 20px;
        }

        span:nth-of-type(1) {

            width: 18px;
        }

        span:nth-of-type(2) {
            width: 10px;
        }

        span:nth-of-type(3) {
            width: 18px;
        }
    }
}

.pic {
    width: 100%;
    height: 150px;
    background: #fff;
    position: relative;

    h3 {
        width: 95%;
        margin-left: 10px;
        margin-top: 15px;
    }

    p {
        margin-left: 10px;
        margin-top: 10px;

        span:nth-of-type(1) {
            color: #a0a0a0;
        }
    }
}

.price {
    b:nth-of-type(1) {
        margin-left: 10px;
        color: red;
        font-size: 18px;
        margin-top: 15px;
    }

    b:nth-of-type(2) {
        color: #f70808;
        font-size: 22px;
        margin-top: 15px;
    }

    span:nth-of-type(1) {
        color: #a0a0a0;
        font-size: 14px;
        margin-top: 5px;
        text-decoration: line-through;
        margin-left: 5px;
    }

    p:nth-of-type(1) {
        color: #a0a0a0;
        margin-left: 10px;
        margin-top: 10px;
    }
}

.share {
    position: absolute;
    top: 20px;
    right: 0;
    background: red;
    width: 80px;
    height: 40px;
    border-radius: 20px 0 0 20px;
    color: #fff;
    text-align: center;
    line-height: 40px;
}

.specs {
    width: 100%;
    height: 50px;
    background: #fff;
    margin-top: 20px;
    display: flex;
    align-items: center;

    .one {
        width: 100%;
        height: 150px;
        border-bottom: 1px solid #e1e1e1;
        display: flex;

        img {
            border-radius: 10px;
            margin: 20px;
            width: 110px;
            height: 110px;
        }

        span:nth-of-type(1) {
            margin-top: 80px;
            color: #f70808;
            font-size: 20px;
        }

        span:nth-of-type(2) {
            margin-top: 120px;
            margin-left: -75px;
            color: #a0a0a0;
        }
    }

    .two {
        width: 100%;
        height: 80px;
        border-bottom: 1px solid #e1e1e1;
        display: flex;
        font-size: 12px;

        span:nth-of-type(1) {
            margin: 10px 20px;
        }

        span:nth-of-type(2) {
            border-radius: 5px;
            text-align: center;
            line-height: 30px;
            width: 50px;
            height: 30px;
            margin-top: 35px;
            margin-left: -35px;
            background: #f1f1f1;
        }
    }

    .three {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
            margin-left: 10px;
        }

        div {
            width: 100px;
            height: 30px;
            margin-right: 10px;
            display: flex;
            align-items: center;

            button {
                width: 20px;
                height: 30px;
                border: 0;
                outline: 0;
                background: #f1f1f1;
            }

            span {
                text-align: center;
                line-height: 30px;
                width: 50px;
                height: 30px;
                background: #e6e6e6;
            }
        }
    }

    .four {
        width: 100%;
        margin-top: 30px;
        text-align: center;

        span:nth-of-type(1) {
            background: orange;
            width: 150px;
            height: 40px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            border-radius: 20px 0 0 20px;
        }

        span:nth-of-type(2) {
            background: orangered;
            width: 150px;
            height: 40px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            border-radius: 0 20px 20px 0;
        }
    }
}

.sp2 {
    margin-left: 30px;
    margin-right: 275px;
    color: #333;
}

.discount {
    width: 100%;
    height: 50px;
    background: #fff;
    margin-top: 20px;
    display: flex;
    align-items: center;

    h4 {
        text-align: center;
        margin-top: 10px;
    }

    p {
        margin-top: 80px;
        text-align: center;
        color: #a0a0a0;
    }
}

.dis {
    margin-right: 330px;
}

.shop {
    width: 100%;
    height: 155px;
    background: #fff;
    margin-top: 20px;

    .van {
        line-height: 50px;
    }

    p:nth-of-type(1) {
        width: 100%;
        margin-left: 10px;
        height: 50px;
        border-bottom: 1px solid #e1e1e1;

        span:nth-of-type(1) {
            margin-left: 5px;
            font-size: 18px;
        }

        span:nth-of-type(2) {
            color: #a0a0a0;
            margin-left: 175px;
        }
    }

    p:nth-of-type(2) {
        width: 100%;
        margin-left: 10px;
        height: 50px;
        border-bottom: 1px solid #e1e1e1;
    }

    p:nth-of-type(3) {
        width: 100%;
        margin-left: 10px;
        height: 50px;
    }
}

.baby {
    width: 100%;
    min-height: 200px;
    background: #fff;
    margin: 20px 0;

    .by {
        margin-left: 10px;
        height: 100px;
        border-bottom: 1px solid #e1e1e1;

        span:nth-of-type(1) {
            float: left;
            margin-top: 15px;
        }

        span:nth-of-type(2) {
            margin-left: 188px;
            margin-top: 30px;
            color: #c60909;
        }

        span:nth-of-type(3) {
            margin-left: 160px;
            color: #a1a1a1;
            margin-top: 15px;
        }
    }

    .topic {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #e1e1e1;
        font-size: 18px;
        color: #f70808;
        line-height: 50px;
        text-align: center;
    }

    .topc {
        width: 100%;
        display: flex;

        div {
            margin: 15px 10px;
            align-items: center;
        }
    }
}

footer {
    border-top: 1px solid #e1e1e1;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.home,
.like {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #a1a1a1;
}

.span1 {
    background: orange;
    color: #fff;
    width: 140px;
    height: 50px;
    display: inline-block;
    text-align: center;
    line-height: 50px;
    border-radius: 30px 0 0 30px;
}

.span2 {
    background: orangered;
    color: #fff;
    width: 140px;
    height: 50px;
    display: inline-block;
    text-align: center;
    line-height: 50px;
    border-radius: 0 30px 30px 0;
}
</style>